/**
*@description 简单的柱状图（没有Y轴）
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';

const BarSimple = ({seriesName, width, height, data, labelRotate, loading, dispatch }) => {
     if(!data || !data.value || (data.value && data.value.length<=0)){return (<div className="emptyData">暂无数据</div>)}
    let option = {
        /*toolbox: {
            show: true,
            right:20,
            itemGap:15,
            feature: {
                //restore: {},
                saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/dimg_.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}},
                myTool : {
                    show : true,
                    title : '下载数据',
                    icon : 'image://../sources/dexs_.png?t=004',
                    iconStyle:{emphasis:{borderColor:"#fff"}},
                    onclick : function (){
                        console.log(data.category, seriesName, data.value);
                        toExcel(data.category, seriesName, data.value);
                    }
                },

            }
        },*/
        // tooltip : {
        //     trigger: 'axis',
        //     formatter: "{a} <br/>{b}: {c}",
        //     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        //         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        //     }
        // },
        tooltip : {
            trigger: 'item',
            formatter: function(arg){
                return arg.seriesName+'<br />'+arg.name+'：'+(parseInt(arg.value).formatMoney())
            }
        },
        color:'#fff',
        textStyle:{
            color:'#fff'
        },
        /*grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
        },*/
        xAxis : [
            {
                type : 'category',
                data : data && data.category || [], 
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
                axisLabel: {
                     interval:0,//横轴信息全部显示
                     rotate: labelRotate || 0,
                     formatter:function(val){
                        return labelRotate && val.substring(0,8)+(val.length>8?"...":"") || val;
                     }
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                },
                axisLine:{
                    show:false,
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
                axisLabel:{
                    show:false
                },
                axisTick:{
                    show:false,
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
            }
        ],
        series: [{
            name: seriesName || "",
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter:function(arg){
                        return (parseInt(arg.value).formatMoney())
                    }
                }
            },
            //barWidth: '60%',
            data: data && data.value || []
        }]
    };
    let timeId = 'bar'+new Date().getTime(), exExcel = function(){
        let temp = [];
        data.value.map(function(item, index){
            temp.push([item.value]);
        })
        toExcel(data.category, seriesName, temp);
    };
      return (
        <div>
          <div className="downloads">
                <span className="dimg" onClick={downImg.bind(this,timeId,seriesName)}></span>
                <span className="desl" onClick={exExcel.bind(this)}></span>
          </div>
          <div id={timeId}><ReactEcharts
                option={option} 
                style={{width:width, height: height}}
                theme={"theme_name"}
                showLoading={loading} /></div>
        </div>
      );
};

BarSimple.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    loading:PropTypes.bool,
    seriesName:PropTypes.string,
    labelRotate:PropTypes.number,
    data: PropTypes.object//.isRequired
};

export default connect()(BarSimple);